<template>
  <!-- 领导驾驶舱 -->
  <div class="leaderDriving-container">
    <div class="dataScreen" ref="dataScreenRef">
      <ScreenHeader
        :menuItemsArr="postMenuArr"
        :titleImg="postTitleImg"
        @clickPath="clickMenu"></ScreenHeader>
      <div class="leaderScreen-main">
        <div class="dataScreen-lf">
          <div class="lf-top">
            <ItemTitel :itemTitleImg="postItemTitleImgObj['信息安全']">
            </ItemTitel>
            <div class="lf-top-cn">
              <div class="cn-redWarnBox">
                <div class="warningBox redWarinIcon">
                  <img
                    src="@/assets/screenImg/leaderImg/redWarning.png"
                    alt="" />
                </div>
                <div class="warnTextBox">
                  <div style="text-align: center">
                    <span class="numBox">{{ safeInfoObj.nomalNum }}</span
                    ><span class="unitBox">起</span>
                  </div>
                  <div class="warnTextTitleBox"><span>异常访问数</span></div>
                </div>
              </div>
              <div class="cn-yellowWarnBox">
                <div class="cn-yellow-item cn-yellow-left">
                  <div class="warningBox yellowWarinIcon">
                    <img
                      src="@/assets/screenImg/leaderImg/yellowWarning.png"
                      alt="" />
                  </div>
                  <div class="warnTextBox">
                    <div style="text-align: center">
                      <span class="numBox">{{ safeInfoObj.leve }}</span
                      ><span class="unitBox">级</span>
                    </div>
                    <div class="warnTextTitleBox">
                      <span>服务器状态等级</span>
                    </div>
                  </div>
                </div>
                <div class="cn-yellow-item cn-yellow-right">
                  <div class="warningBox yellowWarinIcon">
                    <img
                      src="@/assets/screenImg/leaderImg/yellowWarning.png"
                      alt="" />
                  </div>
                  <div class="warnTextBox">
                    <div style="text-align: center">
                      <span class="numBox">{{ safeInfoObj.dataLev }}</span
                      ><span class="unitBox">级</span>
                    </div>
                    <div class="warnTextTitleBox">
                      <span>数据泄露等级</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="lf-center">
            <ItemTitel
              style="margin-top: 0"
              :itemTitleImg="postItemTitleImgObj['资金计划']"></ItemTitel>
            <!-- chart区域 -->
            <div class="fundPlan-chartBox">
              <FundPlanChart ref="fundPlanChartRef" />
            </div>
          </div>
          <div class="lf-bottom">
            <ItemTitel
              style="margin-top: 0"
              :itemTitleImg="postItemTitleImgObj['预算收支情况']">
              <template #rightCnBox>
                <span
                  class="m-r20"
                  :class="budgetFlag ? 'budgetBtnActive' : ''"
                  @click="showFundBudget"
                  >资金预算</span
                >
                <span
                  :class="budgetFlag ? '' : 'budgetBtnActive'"
                  @click="showManageBudget"
                  >经营预算</span
                >
              </template>
            </ItemTitel>
            <!-- chart区域 -->
            <div class="budget-chartBox">
              <BudgetChart ref="BudgetChartRef" />
            </div>
          </div>
        </div>
        <div class="dataScreen-ct">
          <div class="ct-top">
            <el-input
              v-model="searchInputVal"
              class="searchInputStyle"
              placeholder="全域数据搜索">
              <template #prefix>
                <img src="@/assets/screenImg/leaderImg/搜索.png" alt="" />
              </template>
            </el-input>
            <div class="selectBox">
              <SlecetTool
                :optionsArr="selectOptionsArr"
                :getWidth="'128'"
                @postSelectVal="getSelecedVal"></SlecetTool>
              <span class="select-title">年度经营状态</span>
              <span class="select-rightBtn">查看详情</span>
            </div>
            <div class="listBox">
              <div
                class="list-itemBox"
                v-for="(n, i) in manageStateDataArr"
                :key="i">
                <img src="@/assets/screenImg/leaderImg/ctTopList.png" alt="" />
                <div class="item-cn">
                  <div class="cn-title">{{ n.title }}</div>
                  <div class="cn-text">
                    <digital-flop
                      :config="n.realityNumConfig"
                      style="width: 90px; height: 25px; padding-top: 4px" />
                    <div
                      class="unitBox"
                      :style="{ left: n.unitLeftVal + 'px' }">
                      <span v-if="n.goalNum">/{{ n.goalNum }}</span>
                      <span>{{ n.unit }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- map区域 -->
          <div class="ct-map">
            <leaderMapChart ref="leaderMapChartRef" />
          </div>
        </div>
        <div class="dataScreen-rg">
          <div class="rg-top">
            <ItemTitel :itemTitleImg="postItemTitleImgObj['投资管理']">
            </ItemTitel>
            <div class="rg-top-cn">
              <div class="cn-item" v-for="(n, i) in investDataArr" :key="i">
                <img src="@/assets/screenImg/leaderImg/investPic.png" alt="" />
                <div class="cn-item-text">
                  <div class="item-text-title">{{ n.title }}</div>
                  <div class="item-text-num">
                    <digital-flop
                      :config="n.moneyConfig"
                      style="width: 90px; height: 20px" />
                    <div class="text-num-unit">万元</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="rg-center">
            <ItemTitel :itemTitleImg="postItemTitleImgObj['重点项目管理']">
            </ItemTitel>
            <div class="rg-center-cn">
              <div class="cn-item" v-for="(n, i) in keyProjectDataArr" :key="i">
                <div class="cn-item-left">
                  <img
                    :src="
                      n.title === '风险项目'
                        ? projectStateImgUrl['风险']
                        : projectStateImgUrl['正常']
                    "
                    alt="" />
                </div>
                <div class="cn-item-right">
                  <div class="item-right-title">{{ n.title }}</div>
                  <div
                    class="item-right-num"
                    :class="n.title === '风险项目' ? 'right-num-warning' : ''">
                    <digital-flop
                      :config="n.pjNumConfig"
                      style="width: 90px; height: 25px" />
                    <div
                      class="right-num-unit"
                      :style="{
                        left: n.unitLeftVal + 'px',
                      }">
                      个
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="rg-third">
            <ItemTitel
              style="margin-top: 0"
              :itemTitleImg="postItemTitleImgObj['任务督办']">
            </ItemTitel>
            <div class="rg-third-cn">
              <div
                class="third-cn-item"
                v-for="(n, i) in maskUrgeDataArr"
                :key="i">
                <div
                  class="cn-item-left"
                  :class="n.title === '督办逾期' ? 'item-left-warning' : ''">
                  <img :src="n.imgUrl" alt="" />
                </div>
                <div class="cn-item-right">
                  <div class="item-right-title">{{ n.title }}</div>
                  <div class="item-right-num">
                    <digital-flop
                      :config="n.maskNumConfig"
                      style="width: 90px; height: 25px" />
                    <div
                      class="right-num-unit"
                      :style="{
                        left: n.unitLeftVal + 'px',
                      }">
                      个
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="rg-bottom">
            <ItemTitel
              style="margin-top: 0"
              :itemTitleImg="postItemTitleImgObj['人力资源']">
            </ItemTitel>
            <div class="rg-bottom-cn">
              <div class="bottom-cn-item" v-for="(n, i) in hrDataArr" :key="i">
                <div class="item-title">{{ n.title }}：</div>
                <div class="numBox">
                  <digital-flop
                    :config="n.perNumConfig"
                    style="width: 90px; height: 25px" />
                  <div
                    class="num-unit"
                    :style="{
                      left: n.unitLeftVal + 'px',
                    }">
                    {{ n.unit }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="leaderScreen">
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import ScreenHeader from "../components/ScreenHeader";
import { DigitalFlop } from "@kjgl77/datav-vue3";
import { getScale } from "../utils/handelScreen";
import ItemTitel from "../components/ItemTitel";
import SlecetTool from "../components/SlecetTool";
import FundPlanChart from "./components/FundPlanChart.vue";
import BudgetChart from "./components/BudgetChart.vue";
import leaderMapChart from "./components/LeaderMap.vue";
import {
  manageStateApi,
  investMngApi,
  keyProjectApi,
  maskUrgeApi,
  hrUseApi,
} from "@/api-dashboard/leaderApi";

// 菜单项
const postMenuArr = ref([
  { name: "经营", path: "/dashboard/manage" },
  { name: "资产", path: "/dashboard/property" },
  { name: "财务", path: "/dashboard/finance" },
  { name: "项目", path: "/dashboard/project" },
  { name: "人资", path: "/dashboard/manpower" },
  { name: "投资", path: "/dashboard/invest" },
]);
const router = useRouter();
const clickMenu = (i) => {
  if (i) router.push(i);
  // window.location.href = i
};
// 页面大标题图片
const postTitleImg = require("@/assets/screenImg/leaderImg/领导驾驶舱.png");
// 各小标题图片
const postItemTitleImgObj = reactive({
  信息安全: require("@/assets/screenImg/leaderImg/信息安全.png"),
  资金计划: require("@/assets/screenImg/leaderImg/资金计划.png"),
  预算收支情况: require("@/assets/screenImg/leaderImg/预算收支情况.png"),
  投资管理: require("@/assets/screenImg/leaderImg/投资管理.png"),
  重点项目管理: require("@/assets/screenImg/leaderImg/重点项目管理.png"),
  任务督办: require("@/assets/screenImg/leaderImg/任务督办.png"),
  人力资源: require("@/assets/screenImg/leaderImg/人力资源.png"),
});

// 搜索框
const searchInputVal = ref(null);

// 下拉选择框 - 选项在前端固定，请保证最近的年份写在第一个
const selectOptionsArr = ref([
  {
    label: "2023",
    value: "2023",
  },
]);
// 默认初始值为下拉选项的第一个
const selectedValue = ref(selectOptionsArr.value[0].value);
// 下拉框选择之后触发
const getSelecedVal = (val) => {
  selectedValue.value = val;
  getMngStateData(val);
  getInvestData(val);
  getKeyPjData(val);
  getMaskUrgeData(val);
  getHRUseData(val);
  initAllCharts(val);
};

// 信息安全数据
const safeInfoObj = reactive({
  nomalNum: 2,
  leve: 20,
  dataLev: 1,
});

// 预算收支情况
const budgetFlag = ref(true);
const showFundBudget = () => {
  budgetFlag.value = !budgetFlag.value;
  BudgetChartRef.value?.initBudgetChart("资金预算", selectedValue.value);
};
const showManageBudget = () => {
  budgetFlag.value = !budgetFlag.value;
  BudgetChartRef.value.initBudgetChart("经营预算", selectedValue.value);
};

// 投资管理
const investMoneyBaseConfig = reactive({
  content: "{nt}",
  toFixed: 2,
  textAlign: "center",
  animationFrame: 200,
  style: {
    fontSize: 20,
    fontFamily: "SourceHanSans-BD",
    fill: "#FFFFFF",
    shadowOffsetX: 0,
    shadowOffsetY: 0,
    fontWeight: "bold",
    shadowBlur: 4,
    shadowColor: "#8CDCFF",
  },
});
const investDataArr = ref([
  {
    title: "投资计划金额",
    moneyConfig: {
      number: [0],
      ...investMoneyBaseConfig,
    },
  },
  {
    title: "已投资金额",
    moneyConfig: {
      number: [0],
      ...investMoneyBaseConfig,
    },
  },
]);
const getInvestData = (yearVal) => {
  investMngApi.tzgl().then((res) => {
    const { httpStatusCode, data } = res;
    if (httpStatusCode == 200 && data.records?.length) {
      let dataArr = data.records;
      dataArr.map((n, i) => {
        if (n.year == yearVal) {
          // 投资计划金额
          investDataArr.value[0].moneyConfig.number[0] = n.amount_goal
            ? n.amount_goal / 10000
            : 0;

          // 已投资金额
          investDataArr.value[1].moneyConfig.number[0] = n.amount_reality
            ? n.amount_reality / 10000
            : 0;
        }
      });
    }
  });
};

// 重点项目管理
const keyProjectBaseStyleConfig = reactive({
  fontSize: 24,
  fontFamily: "SourceHanSans-BD",
  fill: "#FFFFFF",
  shadowOffsetX: 0,
  shadowOffsetY: 0,
  fontWeight: "bold",
  shadowBlur: 4,
});
const keyProjectBaseConfig = reactive({
  content: "{nt}",
  textAlign: "left",
  animationFrame: 200,
  style: {
    ...keyProjectBaseStyleConfig,
    shadowColor: "#36E3E3",
  },
});
const keyProjectDataArr = ref([
  {
    title: "计划项目",
    unitLeftVal: 18,
    pjNumConfig: {
      number: [0],
      ...keyProjectBaseConfig,
    },
  },
  {
    title: "进行中项目",
    unitLeftVal: 18,
    pjNumConfig: {
      number: [0],
      ...keyProjectBaseConfig,
    },
  },
  {
    title: "风险项目",
    unitLeftVal: 18,
    pjNumConfig: {
      number: [0],
      content: "{nt}",
      textAlign: "left",
      animationFrame: 200,
      style: {
        ...keyProjectBaseStyleConfig,
        shadowColor: "#FF4B4B",
      },
    },
  },
  {
    title: "滞后项目",
    unitLeftVal: 18,
    pjNumConfig: {
      number: [0],
      ...keyProjectBaseConfig,
    },
  },
  {
    title: "正常项目",
    unitLeftVal: 18,
    pjNumConfig: {
      number: [0],
      ...keyProjectBaseConfig,
    },
  },
  {
    title: "提前项目",
    unitLeftVal: 18,
    pjNumConfig: {
      number: [0],
      ...keyProjectBaseConfig,
    },
  },
]);
const projectStateImgUrl = reactive({
  正常: require("@/assets/screenImg/commonImg/blueBook.png"),
  风险: require("@/assets/screenImg/commonImg/redBook.png"),
});
const getKeyPjData = (yearVal) => {
  keyProjectApi.zdxmgl().then((res) => {
    const { httpStatusCode, data } = res;
    if (httpStatusCode == 200 && data.records?.length) {
      let dataObj = data.records.filter((n) => {
        return n.year == yearVal;
      })[0];
      const pjNameObj = {
        0: "plan_project",
        1: "ongoing_project",
        2: "risk_project",
        3: "lagging_project",
        4: "normal_project",
        5: "advance_project",
      };
      keyProjectDataArr.value.map((n, i) => {
        n.pjNumConfig.number[0] = dataObj[pjNameObj[i]]
          ? dataObj[pjNameObj[i]]
          : 0;
        let pjstr = n.pjNumConfig.number[0] + "";
        n.unitLeftVal = pjstr.length * 18;
      });
    }
  });
};

// 任务督办
const maskUrgeDataArr = ref([
  {
    title: "督办总数",
    unitLeftVal: 18,
    maskNumConfig: {
      number: [0],
      ...keyProjectBaseConfig,
    },
    imgUrl: require("@/assets/screenImg/leaderImg/urge1.png"),
  },
  {
    title: "上级交办事项",
    unitLeftVal: 18,
    maskNumConfig: {
      number: [0],
      ...keyProjectBaseConfig,
    },
    imgUrl: require("@/assets/screenImg/leaderImg/urge2.png"),
  },
  {
    title: "督办逾期",
    unitLeftVal: 18,
    maskNumConfig: {
      number: [0],
      content: "{nt}",
      textAlign: "left",
      animationFrame: 200,
      style: {
        ...keyProjectBaseStyleConfig,
        shadowColor: "#FF4B4B",
      },
    },
    imgUrl: require("@/assets/screenImg/leaderImg/urge3.png"),
  },
  {
    title: "需协调事项",
    unitLeftVal: 18,
    maskNumConfig: {
      number: [0],
      ...keyProjectBaseConfig,
    },
    imgUrl: require("@/assets/screenImg/leaderImg/urge4.png"),
  },
]);
const getMaskUrgeData = (yearVal) => {
  maskUrgeApi.rwdb().then((res) => {
    const { httpStatusCode, data } = res;
    if (httpStatusCode == 200 && data.records?.length) {
      let dataObj = data.records.filter((n) => {
        return n.year == yearVal;
      })[0];
      const maskNameObj = {
        0: "total",
        1: "superior",
        2: "be_overdue",
        3: "coordination",
      };
      maskUrgeDataArr.value.map((m, j) => {
        m.maskNumConfig.number[0] = dataObj[maskNameObj[j]]
          ? dataObj[maskNameObj[j]]
          : 0;
        let getNumstr = m.maskNumConfig.number[0] + "";
        m.unitLeftVal = getNumstr.length * 18;
      });
    }
  });
};

// 人力资源
const HRStyleBaseConfig = reactive({
  style: {
    fontSize: 18,
    fontFamily: "SourceHanSansMedium",
    fill: "#56CAFF",
  },
});
const HRPerNumBaseConfig = reactive({
  content: "{nt}",
  textAlign: "left",
  animationFrame: 200,
  ...HRStyleBaseConfig,
});
const HRMoneyNumBaseConfig = reactive({
  content: "{nt}",
  textAlign: "left",
  toFixed: 2,
  animationFrame: 200,
  ...HRStyleBaseConfig,
});

const hrDataArr = ref([
  {
    title: "员工总人数",
    unitLeftVal: 18,
    perNumConfig: {
      number: [0],
      ...HRPerNumBaseConfig,
    },
    unit: "人",
  },
  {
    title: "人力成本",
    unitLeftVal: 44,
    perNumConfig: {
      number: [0],
      ...HRMoneyNumBaseConfig,
    },
    unit: "万元",
  },
  {
    title: "人员缺口",
    unitLeftVal: 18,
    perNumConfig: {
      number: [0],
      ...HRPerNumBaseConfig,
    },
    unit: "人",
  },
  {
    title: "人效比",
    unitLeftVal: 44,
    perNumConfig: {
      number: [0],
      ...HRMoneyNumBaseConfig,
    },
    unit: "%",
  },
]);
const getHRUseData = (yearVal) => {
  hrUseApi.rlzy().then((res) => {
    const { httpStatusCode, data } = res;
    if (httpStatusCode == 200 && data.records?.length) {
      let dataObj = data.records.filter((n) => {
        return n.year == yearVal;
      })[0];
      const maskNameObj = {
        0: "total",
        1: "cost",
        2: "deletion",
        3: "ratio",
      };
      hrDataArr.value.map((m, j) => {
        if (j === 0 || j === 2) {
          m.perNumConfig.number[0] = dataObj[maskNameObj[j]]
            ? dataObj[maskNameObj[j]]
            : 0;
          let dataStr = m.perNumConfig.number[0] + "";
          m.unitLeftVal = dataStr.length * 13;
        }
        if (j === 1) {
          m.perNumConfig.number[0] = dataObj[maskNameObj[j]]
            ? dataObj[maskNameObj[j]] / 10000
            : 0;
          let dataStr = m.perNumConfig.number[0].toFixed(2) + "";
          m.unitLeftVal = dataStr.length * 11.5;
        }
        if (j === 3) {
          m.perNumConfig.number[0] = dataObj[maskNameObj[j]]
            ? (dataObj[maskNameObj[j]] - 0) / 100
            : 0;
          let dataStr = m.perNumConfig.number[0].toFixed(2) + "";
          m.unitLeftVal = dataStr.length * 11.5;
        }
      });
    }
  });
};

// 年度经营状态
const realityNumBaseConfig = reactive({
  content: "{nt}",
  textAlign: "left",
  toFixed: 2,
  animationFrame: 200,
  style: {
    fontSize: 18,
    fill: "#36e3e3",
    shadowOffsetX: 0,
    shadowOffsetY: 1,
    shadowBlur: 5,
    shadowColor: "rgba(86,202,255,0.81)",
  },
});
const manageStateDataArr = ref([
  {
    title: "主营业务收入",
    realityNumConfig: {
      number: [0],
      ...realityNumBaseConfig,
    },
    unitLeftVal: 44,
    goalNum: null, // 目标
    unit: "亿元",
  },
  {
    title: "利润总额",
    realityNumConfig: {
      number: [0],
      ...realityNumBaseConfig,
    },
    unitLeftVal: 44,
    goalNum: null,
    unit: "亿元",
  },
  {
    title: "人均利润",
    realityNumConfig: {
      number: [0],
      ...realityNumBaseConfig,
    },
    unitLeftVal: 44,
    goalNum: null,
    unit: "万元",
  },
  {
    title: "净资产收益率",
    realityNumConfig: {
      number: [0],
      ...realityNumBaseConfig,
    },
    unitLeftVal: 44,
    goalNum: null,
    unit: "%",
  },
  {
    title: "企业上缴税收",
    realityNumConfig: {
      number: [0],
      ...realityNumBaseConfig,
    },
    unitLeftVal: 44,
    goalNum: null,
    unit: "亿元",
  },
]);
const getMngStateData = (postVal) => {
  let paramObj = {
    year: postVal,
  };
  manageStateApi.ndjyzt(paramObj).then((res) => {
    const { httpStatusCode, data } = res;
    if (httpStatusCode == 200 && data.records?.length) {
      let dataObj = data.records[0];
      const goalNameObj = {
        0: "main_products_goal",
        1: "total_profit_goal",
        2: "per_profit_goal",
      };
      const realyNameObj = {
        0: "main_products_reality",
        1: "total_profit_reality",
        2: "per_profit_reality",
      };
      const otherNameObj = {
        3: "net_assets",
        4: "tax_payment",
      };
      manageStateDataArr.value.map((n, i) => {
        if (i === 0 || i === 1 || i === 2) {
          if (i !== 2) {
            n.goalNum = dataObj[goalNameObj[i]]
              ? _.round(dataObj[goalNameObj[i]] / 100000000, 2)
              : 0;
            n.realityNumConfig.number[0] = dataObj[realyNameObj[i]]
              ? dataObj[realyNameObj[i]] / 100000000
              : 0;
          } else {
            n.goalNum = dataObj[goalNameObj[i]]
              ? _.round(dataObj[goalNameObj[i]] / 10000, 2)
              : 0;
            n.realityNumConfig.number[0] = dataObj[realyNameObj[i]]
              ? dataObj[realyNameObj[i]] / 10000
              : 0;
          }
          let realityStr = n.realityNumConfig.number[0].toFixed(2) + "";
          n.unitLeftVal = realityStr.length * 11.5;
        }
        if (i === 3 || i === 4) {
          if (i === 3) {
            n.realityNumConfig.number[0] = dataObj[otherNameObj[i]]
              ? dataObj[otherNameObj[i]] * 100
              : 0;
          } else {
            n.realityNumConfig.number[0] = dataObj[otherNameObj[i]]
              ? dataObj[otherNameObj[i]] / 100000000
              : 0;
          }
          let realityStr = n.realityNumConfig.number[0].toFixed(2) + "";
          n.unitLeftVal = realityStr.length * 11.5;
        }
      });
    }
  });
};

// 所有chart组件的ref
const fundPlanChartRef = ref();
const BudgetChartRef = ref();
const leaderMapChartRef = ref();
// 所有图表对象
const screenChartObj = reactive({
  chart1: null,
  chart2: null,
});
const initAllCharts = (param) => {
  screenChartObj.chart1 = fundPlanChartRef.value?.initFundPlanChart(param);
  screenChartObj.chart2 = BudgetChartRef.value?.initBudgetChart(
    "资金预算",
    param
  );
};

// 监听浏览器 resize 事件时执行
const dataScreenRef = ref(null);
const screenResize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};

onMounted(() => {
  // 初始化自适应 -- 刚显示的时候就给外层盒子加上缩放属性
  if (dataScreenRef.value) {
    // 缩放并居中。注意：需要搭配 position: absolute; left: 50%; top: 50%; 一起使用
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    // 设计稿宽度
    dataScreenRef.value.style.width = `1920px`;
    // 设计稿高度
    dataScreenRef.value.style.height = `1080px`;
  }
  getMngStateData(selectedValue.value);
  getInvestData(selectedValue.value);
  getKeyPjData(selectedValue.value);
  getMaskUrgeData(selectedValue.value);
  getHRUseData(selectedValue.value);
  // 初始化 echarts
  initAllCharts(selectedValue.value);
  // 初始化地图
  leaderMapChartRef.value?.initLeaderMap(selectedValue.value);
  // 为浏览器绑定自适应函数 -- 防止浏览器栏变化后不再适配
  window.addEventListener("resize", screenResize);
});

// 销毁时触发
onBeforeUnmount(() => {
  window.removeEventListener("resize", screenResize);
  // 彻底释放 eCharts 实例占用的所有资源，包括DOM、事件等，以防卡死
  Object.values(screenChartObj).forEach((val) => {
    val?.dispose()
  });
});
</script>
<style lang="scss" scoped>
// 对于样式较多的文件进行抽离
@import "./leaderDriving.scss";
</style>
<style lang="scss">
.leaderDriving-container {
  .dataScreen {
    .leaderScreen-main {
      .dataScreen-ct {
        .ct-top {
          .searchInputStyle {
            .el-input__wrapper.is-focus {
              box-shadow: 0 0 0 0.00521rem #4092f7 inset !important;
            }
            .el-input__wrapper {
              background-color: transparent;
              box-shadow: none;
              .el-input__inner {
                color: rgba(187, 209, 227, 0.73);
              }
              .el-input__inner::placeholder {
                color: rgba(187, 209, 227, 0.73);
              }
            }
          }
        }
      }
    }
  }
}
</style>
